/**
 * Author: Shen Yanqiu
 * Date: 2018-02-24
 * Time: 16:16
 *
 */
import React from 'react';
import { Page, AreaChartBlock } from 'components';
import classNames from "classnames";
import { Row, Col, Table, Tabs, DatePicker, Card } from 'antd';
import moment from "moment/moment";
import { connect } from 'dva';
import styles from './index.less';
import PropTypes from "prop-types";

const RangePicker = DatePicker.RangePicker;
const TabPane = Tabs.TabPane;

class ActivityStatistics extends React.Component {
  static propTypes = {
    activityStatistics: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
  };
  state = {
    checkDate: [],
    areaChartMessage: '近一周发布活动',
  };
  render () {
    const { loading, dispatch, activityStatistics } = this.props;
    const { list, pagination, areaChartDate } = activityStatistics;
    const changeHandler = (dates) => {
      this.setState({
        checkDate: dates,
        areaChartMessage: '自定义时间发布活动',
      });
      dispatch({
        type: 'forStatistics/loadAreaChartDate',
        payload: {
          checkTime: dates,
        },
      });
      // console.log(dates[0].format('YYYY-MM-DD'));
    };
    const changeMessage = (msg) => {
      const message = {
        today: '今天发布活动',
        week: '近一周发布活动',
        month: '近一月发布活动',
      };
      return message[msg];
    };
    const checkSimple = (type) => {
      console.log(type);
      const simpleDate = {
        today: [moment(), moment()],
        week: [moment().startOf('week'), moment().endOf('week')],
        month: [moment().startOf('month'), moment().endOf('month')],
      };
      this.setState({
        checkDate: simpleDate[type],
        areaChartMessage: changeMessage(type),
      });
    };
    const columns = [{
      title: '序号',
      width: 100,
      dataIndex: 'xuhao',
      key: 'xuhao',
    }, {
      title: '部门',
      width: 150,
      dataIndex: 'bumen',
      key: 'bumen',
    }, {
      width: 800,
    }, {
      fixed: 'right',
      width: 150,
      title: '活动',
      dataIndex: 'activity',
      key: 'activity',
      render: (text, record) => <span>{ text }</span>,
    }];

    const changePaginationHandler = (_pagination) => {
      dispatch({
        type: 'activityStatistics/loadTableList',
        payload: {
          current: _pagination.current,
          pageSize: _pagination.pageSize,
        },
      });
    };
    return (
      <Page loading={loading.effects['activityStatistics/firstLoad']}>
        <Row className={styles.AreaChartBlock}>
          <Col span={24}>
            <Card title={<span className={styles.CardTitle}>活动</span>} bordered={false}>
              <Col span={5}>
                <div className={styles.desc}>
                  <div className={styles.descDark}>累计金额数（元）</div>
                  <div className={styles.descLight}>4320</div>
                  <div className={classNames(styles.descDark, styles.descMarginTop)}>本周金额数（元）</div>
                  <div className={styles.descLight}>342</div>
                </div>
              </Col>
              <Col span={19}>
                <Row justify={"space-between"} type={"flex"} align={"middle"}>
                  <Col>
                    <div className={styles.AreaChartTitle}>
                      {this.state.areaChartMessage}
                    </div>
                  </Col>
                  <Col>
                    <Row className={styles.AreaChartTime}>
                      <Col span={11}>
                        <Tabs defaultActiveKey="week" tabBarGutter={0} size={"small"} tabBarStyle={{ border: 0 }} onChange={checkSimple}>
                          <TabPane tab="今天" key="today" />
                          <TabPane tab="本周" key="week" />
                          <TabPane tab="本月" key="month" />
                        </Tabs>
                      </Col>
                      <Col span={13}>
                        <RangePicker
                          ranges={{ '今天': [moment(), moment()], '本周': [moment().startOf('week'), moment().endOf('week')], '本月': [moment().startOf('month'), moment().endOf('month')] }}
                          value={this.state.checkDate}
                          allowClear={false}
                          onChange={changeHandler}
                          placeholder={['开始时间', '结束时间']}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <AreaChartBlock data={areaChartDate} />
              </Col>
            </Card>
          </Col>
          <Col span={24} className={styles.MarginTop}>
            <Card title={<span className={styles.CardTitle}>部门数据</span>} bordered={false} className={styles.CardTable}>
              <Table
                dataSource={list}
                columns={columns}
                // scroll={{ x: 1100, y: false }}
                pagination={pagination}
                onChange={changePaginationHandler}
                loading={loading.effects['activityStatistics/loadTableList']}
              />
            </Card>
          </Col>
        </Row>
      </Page>
    );
  }
}
export default connect(({ loading, activityStatistics }) => ({ loading, activityStatistics }))(ActivityStatistics);
